import React from "react";
import { Form, Input, Button, List, Divider } from "antd";

class App extends React.Component {
  state = {
    todos: [
      {
        name: "吃饭",
        id: 1
      },
      {
        name: "睡觉",
        id: 2
      },
      {
        name: "打豆豆",
        id: 3
      }
    ]
  };

  /**
   * addTodo
   */
  addTodo = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  };

  render() {
    const { todos } = this.state;
    const { getFieldDecorator } = this.props.form;

    return (
      <div className="todo-app">
        <h1>TodoApp</h1>

        <Form layout="inline" onSubmit={this.addTodo}>
          <Form.Item>
            {getFieldDecorator("name", {
              rules: [{ required: true, message: "请输入内容" }]
            })(<Input placeholder="输入代办事项" />)}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Add
            </Button>
          </Form.Item>
        </Form>

        <Divider />

        <List
          bordered
          dataSource={todos}
          renderItem={item => (
            <List.Item>
              <span>{item.name}</span>

              <ul className="ant-list-item-action">
                <li>
                  <Button type="danger" icon="delete"></Button>
                </li>
              </ul>
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default Form.create()(App);
